﻿
.main {
    padding-top: 5px;
    height: calc(100% - 170px);
    --bb-row-label-width: 62px;
}

.main-container {
    height: 100%;
    display: flex
}

.main .main-header {
    height: 35px;
    line-height: 20px;
    border: var(--border-width);
    padding: 5px;
}

.main .main-left {
    width: 80%;
    height: 100%;
}

.main .main-right {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    border: var(--border-width);
    border-left: none
}

.main .main-body {
    height: 100%;
    display: flex
}

    .main .main-body .main-body-left {
        width: 31%;
        border: var(--border-width);
        border-top: none;
    }

        .main .main-body .main-body-left ::deep .btn {
            width: 101px;
        }

        .main .main-body .main-body-left ::deep .table-container {
            height: calc(100% - 37px);
            padding: 5px
        }

        .main .main-body .main-body-left ::deep .table-wrapper {
            border: none
        }

        .main .main-body .main-body-left:first-child button {
            width: 99.6px
        }

        .main .main-body .main-body-left .row {
            padding: 5px;
            text-align: center
        }

    .main .main-body .main-body-right {
        width: 69%;
        position: relative;
        border: var(--border-width);
        border-top: none;
        border-left: none;
    }

        .main .main-body .main-body-right ::deep .svg-editor {
            --main-bg-color: white;
            height: 100%
        }

            .main .main-body .main-body-right ::deep .svg-editor .svg_editor {
                grid-template-columns: 1px 15px 50px 1fr 0px;
                grid-template-rows: auto 15px 1fr 1px;
            }

            .main .main-body .main-body-right ::deep .svg-editor #tools_left {
                display: none
            }

            .main .main-body .main-body-right ::deep .svg-editor #tools_bottom {
                display: none
            }

            .main .main-body .main-body-right ::deep .svg-editor #tools_top {
                display: none
            }

            .main .main-body .main-body-right ::deep .svg-editor #main_button {
                display: none
            }

            .main .main-body .main-body-right ::deep .svg-editor #sidepanels {
                display: none
            }

            .main .main-body .main-body-right ::deep .svg-editor #ruler_x {
                background: white;
            }

            .main .main-body .main-body-right ::deep .svg-editor #ruler_y {
                background: white;
            }

            .main .main-body .main-body-right ::deep .svg-editor #ruler_corner {
                background: white;
            }


.main-footer {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    height: 51px;
    width: 100%;
    border: var(--border-width);
    border-top: none;
}

    .main-footer .footer-item {
        height: 32px;
        width: 32px;
        margin-top: 8px;
        background-image: url(./paiban.svg)
    }

.blue-border {
    border: var(--border-width);
}

@media screen and (max-width: 1200px) {
    .main .main-body .main-body-left ::deep .table-container {
        height: calc(100% - 315px);
    }
}
